<template>
    <view class="container">
        <view class="box" v-if="code">
            <view class="thumb">
                <image mode="aspectFill" :src="productinfo.products.thumb_text" />
            </view>

            <view class="info">
                <view class="validate">
                    <view class="icon">
                        <image src="/static/images/validate_active.png"></image>
                    </view>
                    <view class="txt">
                        您查询的产品是官方正品!
                        <view>请放心使用！</view>
                    </view>
                </view>

                <view class="line"></view>

                <view class="list">
                    <view class="item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">{{ productinfo.query_num }}</view>
                    </view>

                    <view class="item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value text-container" >
                            <text class="copy-text">{{ productinfo.query_code }}</text>
                            <u-icon name="复制" size="15" color="#18bc9c" @click="CopyText"></u-icon>
                        </view>
                        
                    </view>

                    <view class="item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">{{ productinfo.query_time_text }}</view>
                    </view>

                    <view class="item">
                        <view class="name">
                            防伪码所属产品：
                        </view>
                        <view class="value">{{ productinfo.products.name }}</view>
                    </view>
                </view>

                <view class="code" v-if="productinfo.query_qrcord_text" >
                    <!-- show-menu-by-longpress 开启长按图片显示识别小程序码菜单 -->
                    <image :src="productinfo.query_qrcord_text" show-menu-by-longpress mode="aspectFit"/>
                </view>
                
                <view class="action">
                    <u-button type="success" text="更换防伪码" color="rgb(24, 188, 156)" :customStyle="infoBtn" @click="show = true"></u-button>
                </view>
            </view>  
        </view>
        <view v-else>
            <u-empty mode="data"></u-empty>
        </view>
        <!-- 提醒组件 -->
        <u-toast ref="notice"></u-toast>

        <!-- 模态框 -->
		<u-modal :show="show" :content="content" :showCancelButton="true" @cancel="show = false" @confirm="GetGenerate"></u-modal>
    </view>
</template>

<script>
export default{
    onLoad(options)
    {
        // console.log(options.code)
        this.code = options.code ? options.code : '';
    },
    onReady()
    {
        this.GetInfoData()
    },
    data() {
        return {
            code: '',
            productinfo: {
                products: {}
            },
            infoBtn: {
                width: '40%'
            },
            show: false,
            content:'是否更换防伪码'

        }
    },
    methods: {
        CopyText()//复制方法
        {
            var text = this.productinfo.query_code

            //调用复制剪切板接口
            uni.setClipboardData({
                data: text,
            })
        },
        async GetInfoData()
        {
            if(!this.code) return false
            var params = {
                code: this.code
            }

            var result = await uni.$u.http.post('/business/GetInfo',params)

            // console.log(result)
            if(result.code == 0)
            {
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg
                })
                return false
            }

            this.productinfo = result.data;
            
        },
        async GetGenerate()//更换防伪码
        {
            this.show = false

            var result = await uni.$u.http.post('/business/GenerateCode',{code:this.code})

            if(result.code == 0)
            {  
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg
                })
                return false
            }

            this.productinfo = result.data;

        }
    }

}
</script>

<style>
page{
    background-color: #eee;
    padding-bottom:10px;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.thumb{
    width: 100%;
    height: 280px;
    border-radius:10px;
    overflow:hidden;
}

.thumb image{
    width:100%;
    height:100%;
    object-fit: cover;
}

.info{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.info .validate{
    display:flex;
    align-items: center;
    padding:10px 0 10px 10px;
}

.info .validate image{
    width:50px;
    height:50px;
    margin-right:10px;
}

.info .validate .txt{
    font-size:14px;
}

.info .validate .txt view{
    font-size:12px;
    color:#9b9b9a;
    margin-top:5px;
}

.info .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.info .list .item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.info .list .item .name{
    color:#9b9b9a;
}

.info .code{
    width:100%;
    height:280px;
}

.info .code image{
    width:100%;
    height:100%;
}
</style>